import { View, Text } from '@tarojs/components'
import { useLoad, useDidShow } from '@tarojs/taro'
import Taro from '@tarojs/taro'
import { useAuth, useUser } from '../../contexts'
import './settings.scss'

export default function Settings() {
    const { checkAuthState, logout } = useAuth()
    const { isLoggedIn } = useUser()

    useLoad(() => {
        checkAuthState()
    })

    useDidShow(() => {
        checkAuthState()
    })

    // 处理设置项点击
    const handleSettingClick = (type) => {
        switch (type) {
            case 'deleteAccount':
                Taro.showModal({
                    title: '注销用户',
                    content: '注销后将清除所有用户数据，确定要注销吗？',
                    success: (res) => {
                        if (res.confirm) {
                            Taro.showToast({
                                title: '注销功能开发中',
                                icon: 'none'
                            })
                        }
                    }
                })
                break
            case 'privacy':
                Taro.showToast({
                    title: '隐私设置开发中',
                    icon: 'none'
                })
                break
            case 'thirdParty':
                Taro.showToast({
                    title: '第三方信息清单开发中',
                    icon: 'none'
                })
                break
            case 'dataCollection':
                Taro.showToast({
                    title: '信息收集清单开发中',
                    icon: 'none'
                })
                break
            case 'about':
                Taro.showModal({
                    title: '关于我们',
                    content: '新氧医美小程序\n版本：1.0.0\n© 2024 新氧',
                    showCancel: false
                })
                break
            default:
                Taro.showToast({
                    title: '功能开发中',
                    icon: 'none'
                })
        }
    }

    // 退出登录
    const handleLogout = () => {
        Taro.showModal({
            title: '提示',
            content: '确定要退出登录吗？',
            success: (res) => {
                if (res.confirm) {
                    // 使用全局状态管理退出登录
                    logout()

                    Taro.showToast({
                        title: '已退出登录',
                        icon: 'success',
                        duration: 1500
                    })

                    // 延迟返回上一页
                    setTimeout(() => {
                        Taro.navigateBack()
                    }, 1500)
                }
            }
        })
    }

    return (
        <View className='settings'>
            <View className='settings-content'>

                {/* 注销用户 - 仅登录后显示 */}
                {isLoggedIn && (
                    <View className='setting-item' onClick={() => handleSettingClick('deleteAccount')}>
                        <Text className='setting-text'>注销用户</Text>
                        <Text className='arrow'>{'>'}</Text>
                    </View>
                )}

                {/* 隐私设置 */}
                <View className='setting-item' onClick={() => handleSettingClick('privacy')}>
                    <Text className='setting-text'>隐私设置</Text>
                    <Text className='arrow'>{'>'}</Text>
                </View>

                {/* 与第三方共享个人信息清单 */}
                <View className='setting-item' onClick={() => handleSettingClick('thirdParty')}>
                    <Text className='setting-text'>与第三方共享个人信息清单</Text>
                    <Text className='arrow'>{'>'}</Text>
                </View>

                {/* 个人信息收集清单 */}
                <View className='setting-item' onClick={() => handleSettingClick('dataCollection')}>
                    <Text className='setting-text'>个人信息收集清单</Text>
                    <Text className='arrow'>{'>'}</Text>
                </View>

                {/* 关于我们 */}
                <View className='setting-item' onClick={() => handleSettingClick('about')}>
                    <Text className='setting-text'>关于我们</Text>
                    <Text className='arrow'>{'>'}</Text>
                </View>

            </View>

            {/* 退出登录按钮 - 仅登录后显示 */}
            {isLoggedIn && (
                <View className='logout-section'>
                    <View className='logout-btn' onClick={handleLogout}>
                        <Text className='logout-text'>退出登录</Text>
                    </View>
                </View>
            )}
        </View>
    )
}